.dramaInfoContainer { display: flex; flex-direction: column; } .dramaInfo { display: flex; flex-direction: column; width: 98%; margin: 80px auto; } .titleContainer { display: flex; justify-content: space-between; align-items: center; } .titleContainer p { color: var(--neon-green); width: 60%; font-family: "Poppins"; font-weight: 500; font-size: 34px; } .titleContainer img { width: auto; height: auto; border-radius: 10px; } .animeDescription h2 { color: #ffffff81; margin: 20px 0px -10px 0px; } .animeDescription p { font-family: "Atkinson Hyperlegible"; color: rgba(255, 255, 255, 0.637); } .buttonContainer { margin: 0px; height: 200px; overflow-y: auto; border-radius: 10px; } .buttonHeader { margin: 0px 10px 10px 0px; color: #ffffff81 } .buttonContainer button { transition: transform 200ms ease-in-out; } .buttonContainer button:focus { opacity: 0.7; transition: transform 200ms ease-in; background-color: var(--soft-purple); transform: scale(0.9); } .buttonContainer::-webkit-scrollbar-thumb { background-color: var(--soft-purple); border-radius: 5px; } .dramaButton { padding: 10px; font-family: "Quicksand"; font-size: 14px; margin: 5px 5px 5px 5px; width: 55px; border-radius: 5px; text-align: center; border: none; outline: none; color: white; background-color: #3d3d3d; transition: background-color 200ms ease-in-out; cursor: pointer; } .dramaButton:hover { background-color: #1f1f1f; transition: background-color 200ms ease-in } .infoPageContainer p { color: white; } .animeDetails { color: white; } .genreEntries { margin: 3px; padding: 4px; border-radius: 5px; color: var(--neon-green); background-color: #303030; cursor: pointer; font-family: "Atkinson Hyperlegible"; } .animeType span { color: var(--light-green); } .animeRelease span { color: var(--soft-purple) } .videoPopUp { height: 100dvh; width: 100dvw; background-color: #1f1f1fd3; position: fixed; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; overflow-y: auto; } .video { display: flex; flex-direction: column; } .closeButton { font-family: "Poppins", serif; font-size: 16px; background-color: var(--pastel-red); padding: 4px 10px; border: 0; outline: 0; border-radius: 0.5rem; cursor: pointer; margin: 5px; width: auto; } .VideoPlayer { width: 60dvw; } @media screen and (max-width: 768px) { .titleContainer p { font-size: 28px; } .animeDetails { font-size: 14px; } .VideoPlayer { width: 100%; } }